<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<!-- STYLESHEETS -->
		<!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
		<link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
		<link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
		<link rel="stylesheet" type="text/css" href="../../css/responsive.css">

		<link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<!-- file-input -->
		<link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css" />
		<!-- SELECT2 -->
		<link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
		<!-- UNIFORM -->
		<link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css" />
		<!-- datatable -->
		<link rel="stylesheet" href="../../js/datatables/datatable.css">
		<!-- WIZARD -->
		<link rel="stylesheet" type="text/css" href="../../js/bootstrap-wizard/wizard.css" />
		  <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
		<!-- FONTS 
	<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
-->
		<!-- JQUERY -->
		<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
		<script src="../../js/common.js"></script>
	</head>

	<body>
		<header class="navbar clearfix" id="header">
		</header>

		<!-- PAGE -->
		<section id="page">
			<!-- SIDEBAR -->
			<div id="sidebar" class="sidebar">
				<div class="sidebar-menu nav-collapse">

					<!-- SIDEBAR MENU -->
					<ul>
						
					</ul>
					<!-- /SIDEBAR MENU -->
				</div>

			</div>
			<!-- /SIDEBAR -->
			<div id="main-content">
<div class="modal fade" id="productpack_detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title">选择商品</h4>
							</div>
							<div class="modal-body">
								<div class="row" style="height:auto">
								<label class="control-label col-md-3">产品名称：</label>
									<div class="col-md-8 inline">
									<input type="text" class="form-control width-50" name="q"   placeholder="请输入产品名称" />
									<a class="btn btn-primary searchProduct">查询</a>
							      </div>
							     
								</div>
								<div class="form-group" style="height:auto">
									<table id="productpack_product" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
												
												
									</table>	
								</div>
								
								
								
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								
							</div>
						</div>
					</div>
				</div>
				<!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
				<div class="container">
					<div class="row">
						<div id="content" class="col-lg-12">
							<!-- PAGE HEADER-->
							<div class="row">
								<div class="col-sm-12">
									<div class="page-header">
										<!-- STYLER -->

										<!-- /STYLER -->
										<!-- BREADCRUMBS -->
										<ul class="breadcrumb">
											<li>
												<i class="fa fa-home"></i>
												<a href="index.html">首页</a>
											</li>
											<li>
												<a href="#">商品管理</a>
											</li>
											<li>维护商品</li>
										</ul>
										<!-- /BREADCRUMBS -->

									</div>
								</div>
							</div>
							<!-- /PAGE HEADER -->
							<!-- SAMPLE -->
							<form id="form_promotion">
							
							<div class="row col-md-12">
								<div class="box border primary" style="margin-left: 20px;">
											<div class="box-title">
												<h4><i class="fa fa-bars"></i>促销设置</h4>
											</div>
											<div class="box-body big" style="padding:10px;">												
								
								
										<div class="row mrg-bt10-right" style="margin-top:10px;">
											<label class="control-label col-md-2"><span class="required">*</span>活动名称：</label>
											<div class="col-md-8 inline">
												<input type="text" class="form-control width-50" name="promotionTitle" onfocus="this.select()" onmouseover="this.onfocus()" placeholder="请输入活动名称" maxlength="50" />
												<input type="hidden" name="id" />
												<span class="error-span"></span>
											</div>
										</div>
										<div class="row mrg-bt10-right" id="rangDate">
											<label class="control-label col-md-2"><span class="required">*</span>生效日期：</label>
											<div class="col-md-6 inline" style="display:inline-flex">
												<input type="text" class="form-control width-50 bootstrap-datepicker" name="startDate" style="width:110px" />-
												<input type="text" class="form-control width-50 bootstrap-datepicker" name="endDate" style="width:120px"/>
												<span class="error-span"></span>
											</div>
										</div>
										<div class="row mrg-bt10-right">
											<label class="control-label col-md-2">使用说明：</label>
											<div class="col-md-8 inline">
												<textarea name="remark" class="form-control" style="width:320px;resize:none;height:40px" ></textarea>
												<span class="error-span"></span>
											</div>
										</div>
										<div class="row mrg-bt10-right" style="margin-top:20px">
											<label class="control-label col-md-2"><span class="required">*</span>优惠类型：</label>
											<div class="col-md-8" style="text-align: left">
												<select id="promotionType_select" class="col-md-6 select2-offscreen" tabindex="-1">												
												<option value="ManJian">满减</option>
												<option value="ManZeng">满赠</option>
												<option value="JiaJiaGou">加价购</option>
												</select>
											
											</div>
										</div>
										<div class="row mrg-bt10-right" style="margin-top:20px">
											<label class="control-label col-md-2"><span class="required">*</span>销售平台：</label>
											<div class="col-md-8" style="text-align: left">
												<select id="platform_select" class="col-md-6 select2-offscreen" tabindex="-1">
													<option value="All">全部</option>
													<option value="M000">壹果</option>
													<option value="M001">壹家店</option>
												</select>
											</div>
										</div>
										<div class="row mrg-bt10-right" id="div_useCoupon">
											<label class="control-label col-md-2">使用优惠券：</label>
											<div class="col-md-8 inline" style="padding-left:5px">
												<input type="checkbox" class="uniform" name="useCoupon" /><span style="margin-left:10px">活动期间使用优惠券</span>

												</div>
										</div>
										<div class="row mrg-bt10-right">
											<label class="control-label col-md-2"><span class="required">*</span>优惠门槛：</label>
											<div class="col-md-8 inline">
												<input type="text" class="form-control width-50" name="limitPrice" onkeypress="return $.IsDecimal(event);" onblur="return $.IsMoney(this);"  onfocus="this.select()" onmouseover="this.onfocus()" placeholder="请输入优惠门槛" maxlength="10" />

												<span class="error-span"></span>
											</div>
										</div>
										<div class="row mrg-bt10-right">
											<label class="control-label col-md-2"><span class="required">*</span>扣减/加价金额：</label>
											<div class="col-md-8 inline">
												<input type="text" class="form-control width-50" name="discountPrice" onkeypress="return $.IsDecimal(event);" onblur="return $.IsMoney(this);"  onfocus="this.select()" onmouseover="this.onfocus()" placeholder="请输入扣减金额" maxlength="10" />

												<span class="error-span"></span>
											</div>
										</div>
										<div class="row mrg-bt10-right product_list">
											<label class="control-label col-md-2"><span class="required">*</span>适用商品：</label>
											<div class="col-md-8 inline" style="padding-left: 0px;">
											<div class="col-sm-4">																									
													<div class="col-sm-1">
									       				<a class="btn btn-primary search">查询</a>
													</div>
											</div>
										</div>
							<div class="col-md-12 product_list">
								 
								<div class="box border orange">
									<div class="box-title" style="text-align:left">
									<h6 style="margin-top: 4px;">已选商品</h6>
									</div>
									<div class="box-body">
									<table id="td_selectproduct" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
										<thead>
										<tr style="text-aglin:center">
										<th>商品编码</th>
										<th>商品名称</th>
										<th>颜色</th>
										<th class="productCode">操作</th>
										</tr>
										</thead>
										<tbody>
										<tr class="empty"><td colspan=4>请添加商品</td></tr>		
										</tbody>		
													
									</table>	
									</div>
							     </div>
								 </div>
								
											
										
							</div>
									
							  </div>
						    </div>	
							</form>
							<div class="row" style="height: 30px;">
								<div class="col-md-12" style="text-align: center;">
									<div class="box ">
										<a href="#"  class="btn btn-success config bt-submit" style="width: 100px">
											保存
										</a>
									</div>
								</div>
					           </div>	
									</div>
								</div>
										
							
							<!-- /SAMPLE -->

							<div class="footer-tools">
								<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
							</div>
						</div>
						<!-- /CONTENT-->
					</div>
				</div>
			</div>
		</section>
		<!--/PAGE -->
		<!-- JAVASCRIPTS -->
		<!-- Placed at the end of the document so the pages load faster -->

		<!-- BOOTSTRAP -->
		<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>

		<!-- BLOCK UI -->
		<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
		<!--bootbox-->
		<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
		<!-- AUTOSIZE -->
		<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
		<!-- spinner -->
		<script src="../../js/spinner/spin.js"></script>
		<!-- INPUT MASK -->
		
		<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
			<!-- UNIFORM -->
	<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
		<!-- DATA TABLES -->
		<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
		<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>


		<!-- SELECT2 -->
		<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
	
        <script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
        <script src="../../js/jquery-validate/jquery.validate.min.js"></script>
		<!-- COOKIE -->
		<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
		<!-- CUSTOM SCRIPT -->
		<script src="../../js/script.js"></script>

		<script src="../../js/Sortable.min.js"></script>
		<script>
			var AddPromotion = function() {
			var wizform = $('#form_promotion');
			var selectProducts=[];//参与活动的商品
			var id,flag;
			var $mainDataTable=null,$promotionDataTable;
			var formValiInit=function(){
	            wizform.validate({
	                doNotHideMessage: true,
					errorClass: 'error-span',
	                errorElement: 'span',
	                rules: {                	 
	                	promotionTitle:{
	                		required:true
	                	},                	
						limitPrice: {
	                        required: true                        
	                    },
	                    discountPrice: {
	                        required: true                        
	                    }
	                },
	                highlight: function (element) { 
	                    $(element)
	                        .closest('.form-group').removeClass('has-success').addClass('has-error'); 
	                },
	
	                unhighlight: function (element) { 
	                    $(element)
	                        .closest('.form-group').removeClass('has-error'); 
	                },	
	                success: function (label) {
	                    if (label.attr("for") == "gender") { 
	                        label.closest('.form-group').removeClass('has-error').addClass('has-success');
	                        label.remove(); 
	                    } else { 
	                        label.addClass('valid') 
	                        .closest('.form-group').removeClass('has-error').addClass('has-success'); 
	                    }
	                }
				 });
			};
			
			var savePromotion=function(){
				if (wizform.valid() == false)return false;			
	            var promotion={};
	               if(id!=null)
	               promotion.id=id;
	               promotion.promotionTitle=$("input[name=promotionTitle]").val();	            
	               promotion.faceValue=$("input[name=faceValue]").val();	               
	               promotion.limitPrice=$("input[name=limitPrice]").val();	
	               promotion.discountPrice=$("input[name=discountPrice]").val();	  
	               promotion.startDate=$("input[name=startDate]").val();
	               promotion.endDate=$("input[name=endDate]").val();
	               promotion.remark=$("[name=remark]").val();
	               promotion.promotionType=$("#promotionType_select").val();
	               promotion.platformNo=$("#platform_select").val();

	               if(promotion.promotionType!="ManJian"){//不是满减获取已经选择的productCode
	                  promotion.productIds=selectProducts.toString();
	                  	
	                   if(selectProducts.length==0)
	                    {
		                    $.alert("请设置参与活动的商品");
		                    return false;
	                    }
	               }else{
	                   promotion.useCoupon=$("input[type=checkbox]").prop("checked");
	               }               
	              
	               
	               $.blockUI();
	               var url= App.getContextPath() + "admin/promotion/addPromotion.do";
	               if(id!=null)
	                     url=App.getContextPath() + "admin/promotion/updatePromotion.do";
	              
	               $.ajax({
						type: "post",
						url: url,
						data:$.param({promotion:JSON.stringify(promotion)}),
						async: true,
						success: function(result) {
						console.log(result);
						$.unblockUI();
						if(result.type=="error"){
							$.alert(result.extra);
							
						}else{
						  location.href="promotion.html";
						}
						}						
					});
			};
			var searchProduct=function(){
					var q=$("input[name=q]").val();
					if(q==""){
					   $.alert("请输入商品名称");
						return;
					}
				
					 var url=App.getContextPath()+"admin/product/searchProductListForPromotion.do?q="+$("input[name=q]").val();
					 if (id && id.length > 0) {
						 url += "&promotionId=" + id;
					 }
	   	           
	   			       if($mainDataTable){
	   			           $mainDataTable.api().ajax.url(url).load();	   		
	   		   		       return;	
	   			        }
	   		           var dtSetting = $.dataTableSetting({					
	   							"ajaxSource" :url,
	   							"serverSide" : true,
	   							"bFilter" : false,// 去掉搜索框
	   							"bLengthChange" : true,// 每页显示数量							
	   							"sScrollX":"100%",
	   							"sScrollXInner": "100%",
	   							"iDisplayLength": 100,
	   							 "paging": false,
	   							
	   							"bSort" : false,					
	   							"aoColumns" : [ {
	   								"mDataProp" : "productCode",
	   								"sTitle" : "商品编码",
	   								"width" : "5%"			
	   							}, {
	   								"mDataProp" : "packTitle",
	   								"sTitle" : "产品名称",
	   								"width" : "65%",
	   								"render":function(data, type, row){
	   											
	   									  return "<div style='display: inline-flex'><div><img width=50 height=50 src="+getProductImage(row.productImages[0].imagePath,"-200*200.jpg")+"></div><div><a href='"+App.getDomain()+"/product/product.html?productId="+row.id+"' target='_blank'>"+row.productName+"</a></div></div>";
	   								
	   									}
	   							}
	   							, {							   	
	   								"sTitle" : "颜色",
	   								"mDataProp" : "shortName",
	   								"width" : "15%"
	   															
	   							}
	   							, {							   	
	   								"sTitle" : "销售价",
	   								"mDataProp" : "productImages[0].imagePath",
	   								"class":"hide",
	   								"width" : "0%"
	   															
	   							}
	   							, {
	   								"sTitle" : "操作",
	   								"width" : "15%",
	   								"render":function(data, type, row){	   									
	   									return "<a class='btn btn-success btn-add btn-width'  href='javascript:;'>加入已选</a>";
	   								
	   								 }
	   								
	   							}]
	   						});
	   					
	   				      $mainDataTable = $("#productpack_product").dataTable(dtSetting);
	   	         }
	         
	         var getPromotionProduct=function(){
	        	            
		                 url=App.getContextPath()+"admin/promotion/getProductListByPromotionId.do?promotionId="+id;
		            
		              $.ajax({
							type: "post",
							url: url,
							
							async: true,
							success: function(result) {	
								if(result.data!=null)
								$("#td_selectproduct tbody").empty();
								$.each(result.data,function(index,item){
								
										if($.inArray(item.productCode,selectProducts)==-1)
								         selectProducts.push(item.productCode);
										var tr="<tr><td>"+item.productCode+"</td>"
										tr+='<td class="productName"><div style="display: inline-flex">'
										tr+='<div><img width=50 height=50 src='+getProductImage(item.productImages[0].imagePath,"-200*200.jpg")+'></div>'
										tr+='<div>'+item.productName
										tr+='</div></div></td><td>'+item.shortName+'</td>'
										tr+='<td><a class="btn btn-danger btn-xs bt-join btn-width"  pstatus=nojoin>取消参与</a></td></tr>';
										$("#td_selectproduct tbody").append(tr);
									
								})
							}						
						});
					    
			          
	         }
	         
	         var groupChange=function(type){				
					      if(type!="ManJian"){
					    	  //$("#form_promotion").find(".box-body:eq(0)").css("height",550);
					          $("#div_useCoupon").hide();
					          if(type=="ManZeng")$("[name=discountPrice]").closest(".row").hide();
					          else $("[name=discountPrice]").closest(".row").show();
					          //App.getGroup();
					          $(".product_list").show();					         
					           $(".search").click(searchProduct);
					           $(".product_list").on("click",".bt-join",function(){
					        	 
					        	   var productCode=$(this).closest("tr").find("td:eq(0)").text();
							           if($(this).attr("pstatus")!="join"){
							        	  
							        	   //将当前行增加从已选列表删除
							        	    selectProducts.remove(productCode,selectProducts);
											$(this).closest("tr").remove();	
											 if($("#td_selectproduct tbody tr").length==0){
								            	   $("#td_selectproduct tbody").append("<tr class='empty'><td colspan=4>请从左侧选择数据</td></tr>");
								               }
							                }					               
					           
					           });
					      }else{
					       $(".product_list").hide();
					       $("#div_useCoupon").show();
					        $("[name=discountPrice]").closest(".row").show();
					      }			   
	              };
	       
	         //获取活动详情
	         var getPromotion=function(id){
	           $.ajax({
						type: "post",
						url: App.getContextPath() + "admin/promotion/getPromotion.do",
						data:{id:id},
						async: true,
						success: function(result) {
						    $("[name=promotionTitle]").val(result.promotionTitle);
						    $("#promotionType_select").select2("val",result.promotionType);
						     $("#promotionType_select").attr("disabled",true);
                            $("#platform_select").select2("val",result.platformNo);
                            $("[name=limitPrice]").val(result.limitPrice);
						    $("[name=remark]").text(result.remark);
						    $("[name=faceValue]").val(result.faceValue);
						    $("[name=discountPrice]").val(result.discountPrice);
						    $("[name=startDate]").val(new Date(parseInt(result.startDate)).format("yyyy-MM-dd"));
						    $("[name=endDate]").val(new Date(parseInt(result.endDate)).format("yyyy-MM-dd"));
						    $("[name=useCoupon]").prop("checked",result.useCoupon);
						     $(".uniform").uniform();
							if(result.promotionType=="ManZeng")
							  $("[name=discountPrice]").closest(".row").hide();
												
							  groupChange(result.promotionType);
							
							
					    }             					
					});
	         };
	       
			
				return {
					init: function() {
					  App.init();
					   formValiInit();
					   $("#promotionType_select").select2().change(function(){groupChange($(this).val())});
					   $(".product_list").hide();
					   $("#promotionType_select").select2("val","ManJian");
					   $("#platform_select").select2().select2("val","All");
					    $(".uniform").uniform();
					     $("[name=useCoupon]").prop("checked",true);
					   $.initDate($("#rangDate"),0,15);					  
					   $("input[name=startDate]").bsdatepicker("setValue",$.nowDate());
						
						$(".bt-submit").click(savePromotion);
						flag=$.getUrlParam("flag");
						id=$.getUrlParam("id");
						if(id!=null){getPromotion(id); getPromotionProduct(id);}
						
							//选择商品
						$(".search").click(function(){
							$("#productpack_detail").modal("show");
							$(".searchProduct").off("click").click(searchProduct);
							 $("#productpack_product").off("click").on("click",".btn-add",function(){
								 var tr=$(this).closest("tr");
								 var id=$(tr).find("td:eq(0)").html();
								 var productTr="<tr>"
									 productTr+="<td>"+id+"</td>"
									 productTr+="<td>"+$(tr).find("td:eq(1)").html()+"</td>"
									 productTr+="<td>"+$(tr).find("td:eq(2)").html()+"</td>"
									 productTr+="<td><a class='btn btn-danger btn-delete ' productid="+id+"><i class='fa fa-pencil-square-o'></i>取消</a></td>"
									 productTr+="</tr>"
									 if(selectProducts.length==0){
										 $("#td_selectproduct").find("tbody").empty();										
									 }
									 selectProducts.push(parseInt($(tr).find("td:eq(0)").html()))
									 $("#td_selectproduct").find("tbody").prepend(productTr);
									
									 $(tr).remove();
							   }); 
						})
						
					}
				}
			}();
			$(function() {
				$("#header").load("../head.html");
				AddPromotion.init();
			});
		</script>

		<!-- /JAVASCRIPTS -->
	</body>

</html>